<template>
	<view class="page">
		<view class="summary">
			<view class="left">
				<u-text :text="today" suffixIcon="arrow-down" bold size="16" @click="show = true"></u-text>
				<u-text text="收入￥888.88 支出￥888.88" margin="10rpx 0 0  "></u-text>
			</view>
			<view class="right">
				<u-button color="#3662EC" text="月度分析" icon="/static/charts.png"
					@click="goToUrl('/pages/agent/franchisee/monthlyAnalysis')"></u-button>
			</view>
		</view>
		<view class="listContainer">
			<view class="list">
				<view class="left">
					<u-image src="/static/logo1.png" width="110rpx" height="110rpx"></u-image>
				</view>
				<view class="center">
					<u-text text="扫码加醇" size="16"></u-text>
					<u-text text="09 月 25 日 02:10" color="#AAAAAA" size="14" margin="10rpx 0 0 0"></u-text>
				</view>
				<view class="right">
					<u-text text="+222.88" size="16" bold=""></u-text>
				</view>
			</view>
			<view class="list">
				<view class="left">
					<u-image src="/static/logo1.png" width="110rpx" height="110rpx"></u-image>
				</view>
				<view class="center">
					<u-text text="扫码加醇" size="16"></u-text>
					<u-text text="09 月 25 日 02:10" color="#AAAAAA" size="14" margin="10rpx 0 0 0"></u-text>
				</view>
				<view class="right">
					<u-text text="+222.88" size="16" bold=""></u-text>
				</view>
			</view>
		</view>
		<u-datetime-picker :show="show" v-model="value" mode="year-month" @cancel="show = false" @confirm="confirmDate"
			:max-date="date"></u-datetime-picker>
	</view>
</template>
<script>
export default {
	data() {
		return {
			show: false,
			value: ""

		}
	},
	onload() {
		this.value = Date.now()

	},
	methods: {
		confirmDate(e) {
			const date = new Date()
			const currentYear = date.getFullYear()
			const currentMonth = date.getMonth() + 1
			const today = ref(`${currentYear}年${currentMonth}月`)
			const timestamp = e.value
			const time = new Date(timestamp)
			const year = time.getFullYear()
			const month = time.getMonth() + 1
			today.value = `${year}年${month}月`
			show.value = false
		}
	}
}



</script>

<style lang="scss" scoped>
.page {
	display: flex;
	flex-direction: column;
}

.summary {
	padding: 30rpx 40rpx;
	display: flex;
	justify-content: space-between;
}

.listContainer {
	overflow: scroll;
	background-color: white;
	flex: 1;
	padding: 0 40rpx;

	.list {
		display: flex;

		::v-deep .u-text {
			flex: 0 !important;
		}

		margin-top: 24rpx;

		.center {
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
			padding-top: 14rpx;
		}

		.right {
			display: flex;
			flex-direction: column;
			margin-left: auto;
			padding-top: 14rpx;
		}
	}
}
</style>
